<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span style="display: block;font-size: 20px; margin-bottom: 20px;">编辑轮播图</span>
      </div>
    </template>
    <div>
      <span>轮播图信息</span>
      <el-form :data="List" label-width="90px">
        <el-form-item style="margin-top: 10px;" props="title" label="轮播图标题">
          <el-input style="width: 722px;" v-model="editText.name" size="large" placeholder="请输入轮播图标题"></el-input>
        </el-form-item>
        <el-form-item label="轮播图片" style="display: flex;justify-content: center;align-items: center;">
          <el-image :src="`http://127.0.0.1:3000/${List.picture}`"
            style="width: 9.5vw;height: 21vh;margin-bottom: 10px; border-radius: 15px;" alt="" />
          <UploadImg @uploadFile="getPictureName"></UploadImg>
        </el-form-item>
        <el-form-item style="margin-top: -25px;">
          <div class="el-upload__tip">
            图片尺寸800*600px
          </div>
        </el-form-item>
        <el-form-item label="轮播图状态">
          <el-switch v-model="editText.status" width="60" size="large" inline-prompt active-text="启动"
            inactive-text="禁用" />
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="editText.link" placeholder="请输入轮播图链接"></el-input>
        </el-form-item>

        <el-form-item label="发布时间">
          <el-date-picker style="width:252px" v-model="value2" type="datetime" placeholder="请选择发布时间"
            :shortcuts="shortcuts" />
        </el-form-item>
        <el-form-item label="排序号">
          <el-input style="width: 252px;" v-model="editText.num" placeholder="请输入排序号"></el-input>
          <span class="text">请填写数字，数字越大排序越靠前</span>
        </el-form-item>
        <el-form-item label="发布人">
          <el-text>{{ editText.publisher }}</el-text>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitText">保存</el-button>
          <el-button type="danger" @click="deleteText">删除</el-button>
          <el-button @click="cancleReturn">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script lang='ts' setup>
import { reactive, onMounted, ref } from 'vue'
import api from '@/api'
import { saveArticleType } from '@/types/ccc/article'
import UploadImg from '@/views/ccc/uploadImg.vue';
import { UploadFile, ElMessage } from 'element-plus'
import format from '@/utils/ccc/format'
import { useRouter } from 'vue-router'
const List = JSON.parse(localStorage.getItem('item'))
const form = ref({
  noticeContent: List.content
})

const editText = reactive({
  name: List.name,
  selectType: List.type,
  time: List.updateTime,
  num: List.collectNum,
  status: List.status,
  publisher: List.publisher,
  collectNum: List.collectNum,
  shareNum: List.shareNum,
  link: List.link
})
console.log(editText);






// 获取文章分类
let options = reactive<Array<any>>([{
  value: 0,
  label: '请选择'
}])
const getArticle = async () => {
  const result = await api.systemSetting.article.getAllArticleTypes()
  // console.log(result);

  if (result.data.code === 200) {
    // console.log(result.data.data);
    result.data.data.forEach((item: any) => {
      // console.log(item);
      // console.log(options);
      if (item) {
        options.push({
          'value': item.id,
          'label': item.name
        })
      }
    });

  }
}
onMounted(() => {
  getArticle()

})


const saveList = reactive<saveArticleType>({
  id: List.id,
  name: '',
  picture: '',
  publisher: '李明明',
  collectNum: 0,
  publishTime: '',
  link: '',
  status: ''
})
const getPictureName = (file: UploadFile) => {
  console.log(file);
  saveList.picture = `public/upload/${file.name}`
}

const value2 = ref<object>(List.updateTime)
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const submitText = async () => {
  console.log(1);
  console.log(editText);
  if (value2.value && editText.num) {
    saveList.name = editText.name
    saveList.publishTime = format(value2.value)
    saveList.collectNum = Number(editText.num)
    saveList.link = editText.link
    if (editText.status) {
      saveList.status = '1'
    } else {
      saveList.status = '0'
    }

    const result = await api.systemSetting.banner.updateBannerById(saveList)
    if (result.data.code === 200) {
      ElMessage.success(result.data.msg)
    } else {
      ElMessage.warning(result.data.msg)
    }

  }
  console.log(saveList);
  // console.log(form.value.noticeContent);
}
const router = useRouter()
const deleteText = () => {
  editText.title = ''
  editText.selectType = 0
  editText.time = ''
  form.value.noticeContent = ''
  value2.value = ''
  editText.time = ''
  editText.num = ''

}
const cancleReturn = () => {
  router.replace('/home/system/lbt')
}

</script>

<style lang='scss' scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 12px;
  color: #989797;
  margin-left: 15px;
}
</style>